import React, { Component } from 'react';
import { NavBar, Skeleton,Toast } from 'antd-mobile'
import { StarOutline, FillinOutline, BankcardOutline } from 'antd-mobile-icons'

// 导入封装轮播组件
import Myswiper from '../components/Myswiper'
// 导入封装请求
import * as goods from '../api/goods'
import * as cart from '../api/cart'

// 导入scss
import '../styles/Detail.scss'

class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodinfo: {},
            userid: ''
        }

    }

    // 点击返回
    back() {
        this.props.history.goBack();
    }

    // 请求商品详情
    componentDidMount() {
        var goodid = this.props.location.state.id
        goods.good_goodinfo({ goodid }).then((res) => {
            // 对请求过来的数据处理为对象形式
            res.data.goodinfo.pics =
                res.data.goodinfo.pics &&
                res.data.goodinfo.pics.map((item, index) => {
                    return { pic: item }
                })
            this.setState({ goodinfo: res.data.goodinfo })
        })
    }

    // 商品收藏
    Collection() {
        var userid = localStorage.getItem("userid ")
        var goodid = this.state.goodinfo.id
        goods.good_fav({ userid, goodid }).then((res) => {
            if (res.data.code == 200) {
                Toast.show({
                    content: '收藏成功',
                })
            }
        })
    }

    // 加入购物车
    addCart(){
        var userid = localStorage.getItem("userid ")
        var goodid = this.state.goodinfo.id
        cart.shopcart_add({userid, goodid}).then((res)=>{
            if (res.data.code == 200) {
                Toast.show({
                    content: '加入购物车成功',
                })
            }
        })
    }


    render() {
        return (
            <div className='detail'>
                {/* 头部 */}
                <NavBar onBack={() => { this.back() }}> <h4>商品详情</h4> </NavBar>
                {/* 如果拿到详情数据，渲染，否则渲染骨架屏 */}
                {
                    this.state.goodinfo.pic &&
                        this.state.goodinfo.pic.length ?
                        <>
                            {/* 轮播图 */}
                            <Myswiper swiperlist={this.state.goodinfo.pics} />
                            {/* 商品名称 */}
                            <div className="name">
                                {this.state.goodinfo.brandEN} &nbsp;
                                {this.state.goodinfo.brand} &nbsp;
                                {this.state.goodinfo.name}
                            </div>
                            {/* 商品价格 */}
                            <div className="price">
                                ¥ {
                                    this.state.goodinfo.salesPrice ?
                                        this.state.goodinfo.salesPrice.value : 0
                                }
                            </div>
                        </> :
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={10} animated />
                        </>
                }
                <div className='detail-tab'>
                    <span className='tab-one'>
                        <div><StarOutline fontSize={18} /></div>
                        <div onClick={() => { this.Collection() }}>收藏</div>
                    </span>
                    <span className='tab-one'>
                        <div><FillinOutline fontSize={18} /></div>
                        <div>分享</div>
                    </span>
                    <span className='tab-one'>
                        <div><BankcardOutline fontSize={18} /></div>
                        <div>购物车</div>
                    </span>
                    <span className='tab-cart' onClick={()=>{this.addCart()}}>加入购物车</span>
                    <span className='tab-buy'>立即购买</span>
                </div>
            </div>
        );
    }
}

export default Detail;